<!--
 * @Author: your name
 * @Date: 2021-07-21 19:11:26
 * @LastEditTime: 2021-08-06 11:22:55
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /sports-wechat/activity/matchInfo/components/headerStep.vue
-->
<template>
  <view class="step-wrap">
    <!-- 小于5个步骤展示自由撑满 -->
    <view class="step-list list-around" v-if="list.length < 5" :style="{'--width': aroundWidth}">
      <view @click="changeChoose(item,index)" :class="['step-item', active == index ? 'active' : '',index > active && currentChoose == index ? 'no-do' : '', index <= active ? 'al-end' : '', (active >= list.length && currentChoose ==index) ? 'al-end-active' : '']" v-for="(item,index) in list" :key="index">
        <view class="step-info">
          <view class="number">{{index+1}}</view>
          <view class="name">{{item.title}}</view>
          <view class="btn">{{index==active?'进行中':'查看'}}</view>
          <view class="arrow" v-if="currentChoose == index"></view>
          <view class="arrow arrow-copy" v-if="currentChoose != index"></view>
          <view class="number-bg" v-if="currentChoose ==index"></view>
        </view>
      </view>
    </view>
    <!-- 大于等于5个步骤展示 -->
    <view class="step-list" v-else>
      <view @click="changeChoose(item,index)" :class="['step-item', active == index ? 'active' : '',index > active && currentChoose == index ? 'no-do' : '', index <= active ? 'al-end' : '', (active >= list.length && currentChoose ==index) ? 'al-end-active' : '']" v-for="(item,index) in list" :key="index">
        <view class="step-info">
          <view class="number">{{index+1}}</view>
          <view class="name">{{item.title}}</view>
          <view class="btn">{{index==active?'进行中':'查看'}}</view>
          <view class="arrow" v-if="currentChoose == index"></view>
          <view class="arrow arrow-copy" v-if="currentChoose != index"></view>
          <view class="number-bg" v-if="currentChoose ==index"></view>
        </view>
      </view>
    </view>
    <!-- 排名 -->
    <view :class="['ranking',active >= list.length ? 'finish' : '']" @click="changeChoose('', list.length)">
      <text>排名</text>
      <view class="arrow" v-if="currentChoose >= list.length"></view>
    </view>
  </view>
</template>

<script>
  export default {
    props: ['list', 'active', 'currentChoose'],
    methods: {
      changeChoose (item, index) {
        this.$emit('changeChoose', item, index)
      }
    },
    computed: {
      aroundWidth () {
        return ((620-this.list.length*100) / (this.list.length -1) + 66) + 'rpx'
      }
    }
  }
</script>

<style lang="scss" scoped>
.step-wrap {
  padding: 0 20rpx 0;
  width: 100%;
  display: flex;
  background: #fff;
  position: relative;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  z-index: 5;
  height: 160rpx;
  max-height: 160rpx;
  .step-list {
    display: flex;
    align-items: center;
    max-width: 620rpx;
    overflow-x: auto;
    // padding-top: 20rpx;
    height: 160rpx;
    box-sizing: border-box;
    .step-item {
      margin-right: 30rpx;
      width: 100rpx;
      max-width: 100rpx;
      position: relative;
      z-index: 2;
      &::before {
        content: '';
        width: 94rpx;
        height: 5rpx;
        background: #f2f2f2;
        position: absolute;
        top: 39rpx;
        right: 68rpx;
        z-index: 1;
      }
      &:last-of-type {
        margin-right: 0;
      }
      &:first-of-type {
        &::before {
          width: 0;
          height: 0;
        }
      }
      .step-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 160rpx;
        position: relative;
        .number {
          margin-bottom: 6rpx;
          width: 36rpx;
          height: 36rpx;
          line-height: 36rpx;
          text-align: center;
          background: #ccc;
          color: #fff;
          border-radius: 50%;
        }
        .name {
          margin-bottom: 10rpx;
          color: #ccc;
          font-size: 30rpx;
          line-height: 30rpx;
        }
        .btn {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100rpx;
          height: 35rpx;
          background: #F2F2F2;
          border-radius: 18rpx;
          font-size: 24rpx;
          color: #999;
        }
        .arrow {
          width:0;
          height:0;
          border:18rpx solid transparent;  //所有border都是透明的，
          border-bottom-color:#f2f2f2; //只有尖相对的方向border有颜色
          position: absolute;
          bottom: 0;
        }
        .arrow-copy {
          border-bottom-color:transparent;
        }
        .number-bg {
          width: 53rpx;
          height: 53rpx;
          position: absolute;
          top: 15rpx;
          left: 25rpx;
          background: #EBF4FF;
          z-index: -1;
          border-radius: 50%;
        }
      }
    }
    .no-do {
      .number-bg {
        background: #efefef!important;
      }
    }
    .al-end {
      .step-info {
        .number,.btn {
          background: #2E87FF;
        }
        .name {
          color: #2E87FF;
        }
        .btn {
          background: #EBF4FF;
          color: #5D9EFF;
        }
      }
      &::before {
        background: #2E87FF;
      }
    }
    .active {
      .step-info {
        .number,.btn {
          background: #2E87FF;
        }
        .name {
          color: #2E87FF;
        }
        .btn {
          color: #fff;
        }
      }
    }
    .al-end-active {
      .step-info {
        .btn {
          background: #2E87FF;
          color: #fff;
        }
      }
    }
  }
  .list-around {
    width: 620rpx;
    justify-content: space-between;
    overflow-x: initial;
    .step-item {
      margin-right: 0;
      &::before {
        width: var(--width);
      }
    }
  }
  .ranking {
    position: absolute;
    top: 12rpx;
    right: 4rpx;
    width: 88rpx;
    height: 128rpx;
    line-height: 128rpx;
    text-align: center;
    background: url($public-baseImgUrl+'match/ranking_gray.png');
    background-size: 100% 100%;
    text {
      margin-right: 14rpx;
      font-size:28rpx;
      color: #fff;
    }
    &.finish {
      background: url($public-baseImgUrl+'match/ranking_orange.png');
      background-size: 100% 100%;
    }
    .arrow {
      position: absolute;
      bottom: -23rpx;
      left: 20rpx;
      width:0;
      height:0;
      border:18rpx solid transparent;  //所有border都是透明的，
      border-bottom-color:#2E87FF; //只有尖相对的方向border有颜色
    }
  }
}
</style>